<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html>
<!--<![endif]-->

<head>
<meta charset="utf-8">
<title>Boo Admin - Form Wizard</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="description" content="">
<meta name="author" content="">

<!-- Le styles -->
<link href="assets/css/lib/bootstrap.css" rel="stylesheet">
<link href="assets/css/lib/bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/extension.css" rel="stylesheet">
<link href="assets/css/boo.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/boo-coloring.css" rel="stylesheet">
<link href="assets/css/boo-utility.css" rel="stylesheet">

<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <script src="assets/plugins/selectivizr/selectivizr-min.js"></script>
    <script src="assets/plugins/flot/excanvas.min.js"></script>
<![endif]-->

<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.html">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.html">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.html">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.html">
</head>

<body class="sidebar-left panel-side">
<div class="page-container">
    <div id="header-container">
        <div id="header">
            <div class="navbar navbar-inverse navbar-fixed-top">
                <div class="navbar-inner">
                    <div class="container-fluid">
                        <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
                        <a class="brand" href="javascript:void(0);"><img src="assets/img/demo/logo-brand.png"></a>
                        <div class="search-global">
                            <input id="globalSearch" class="search search-query input-medium" type="search">
                            <a class="search-button" href="javascript:void(0);"><i class="fontello-icon-search-5"></i></a> </div>
                        <div class="nav-collapse collapse">
                            <ul class="nav user-menu visible-desktop">
                                <li><a class="btn-glyph fontello-icon-edit tip-bc" href="javascript:void(0);" title="Messages"><span class="badge badge-important">8</span></a></li>
                                <li><a class="btn-glyph fontello-icon-mail-1 tip-bc" href="javascript:void(0);" title="Emails"></a></li>
                                <li><a class="btn-glyph fontello-icon-lifebuoy tip-bc" href="javascript:void(0);" title="Support"><span class="badge badge-important">4</span></a></li>
                            </ul>
                            <ul class="nav">
                                <li> <a href="dashboard-one.html">Dashboard</a> </li>
                                <li class="active"> <a href="javascript:void(0);">Components</a> </li>
                                <li> <a href="component-fullcalendar-demo.html"><span class="fontello-icon-calendar"></span>Calendar</a> </li>
                                <li> <a href="javascript:void(0);"><span class="fontello-icon-users"></span>Contacts</a> </li>
                                <li class="dropdown"> <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown"><span class="fontello-icon-list-1"></span>Customize <b class="caret"></b></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="component-form-demo.html">Demo Form</a></li>
                                        <li><a href="component-widgets-remember.html">Remember</a></li>
                                        <li><a href="component-widgets-users.html">User List</a></li>
                                        <li class="divider"></li>
                                        <li class="nav-header">Next Update</li>
                                        <li><a href="javascript:void(0);">Contacts</a></li>
                                        <li><a href="javascript:void(0);">Email</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!-- // navbar -->
            
            <div class="header-drawer">
                <div class="mobile-nav text-center visible-phone"> <a href="javascript:void(0);" class="mobile-btn" data-toggle="collapse" data-target=".sidebar"><i class="aweso-icon-chevron-down"></i> Components</a> </div>
                <!-- // Resposive navigation -->
                <div class="breadcrumbs-nav hidden-phone">
                    <ul id="breadcrumbs" class="breadcrumb">
                        <li><a href="javascript:void(0);"><i class="fontello-icon-home f12"></i> Dashboard</a> <span class="divider">/</span></li>
                        <li class="dropdown"><a href="javascript:void(0);">Table </a> <span class="divider">/</span>
                            <ul class="dropdown-menu">
                                <li><a href="javascript:void(0);">Table</a></li>
                                <li><a href="javascript:void(0);">Elements</a></li>
                                <li><a href="javascript:void(0);">Elements</a></li>
                                <li><a href="javascript:void(0);">Elements</a></li>
                            </ul>
                        </li>
                        <li class="active">Boo Admin </li>
                    </ul>
                </div>
                <!-- // breadcrumbs --> 
            </div>
            <!-- // drawer --> 
        </div>
    </div>
    <!-- // header-container -->
    
    <div id="main-container">
        <div id="main-sidebar" class="sidebar sidebar-inverse">
            <div class="sidebar-item">
                <div class="media profile">
                    <div class="media-thumb media-left thumb-bordereb"> <a class="img-shadow" href="javascript:void(0);"><img class="thumb" src="assets/img/demo/demo-avatar9604.jpg"></a> </div>
                    <div class="media-body">
                        <h5 class="media-heading">Twitter Bootstrap <small>as Administrator</small></h5>
                        <p class="data">Last Access: 16 May 15:30</p>
                    </div>
                </div>
            </div>
            <!-- // sidebar item - profile -->
            
            <ul id="mainSideMenu" class="nav nav-list nav-side">
                <li class="accordion-group">
                    <div class="accordion-heading"> <a href="#accDash" data-parent="#mainSideMenu" data-toggle="collapse" class="accordion-toggle"> <span class="item-icon fontello-icon-monitor"></span> <i class="chevron fontello-icon-right-open-3"></i> Dashboards </a> </div>
                    <ul class="accordion-content nav nav-list collapse" id="accDash">
                        <li> <a href="dashboard-one.html"> <i class="fontello-icon-right-dir"></i> <span class="hidden-tablet">Dashboard</span> Demo 1 </a> </li>
                        <li> <a href="dashboard-two.html"> <i class="fontello-icon-right-dir"></i> <span class="hidden-tablet">Dashboard</span> Demo 2 </a> </li>
                    </ul>
                </li>
                <!-- // item accordionMenu Dashboard -->
                <li class="accordion-group">
                    <div class="accordion-heading active"> <a href="#accForms" data-parent="#mainSideMenu" data-toggle="collapse" class="accordion-toggle"> <span class="item-icon aweso-icon-list-alt"></span><i class="chevron fontello-icon-right-open-3"></i> Form </a> </div>
                    <ul class="accordion-content nav nav-list collapse in" id="accForms">
                        <li> <a href="component-form-demo.html"> <i class="fontello-icon-right-dir"></i> Demo Form </a> </li>
                        <li> <a href="component-form-element.html"> <i class="fontello-icon-right-dir"></i> Form Element </a> </li>
                        <li> <a href="component-form-extension.html"> <i class="fontello-icon-right-dir"></i> Form Extension</a> </li>
                        <li class="active"> <a href="component-form-wizard.html"> <i class="fontello-icon-right-dir"></i> Form Wizard</a> </li>
                    </ul>
                </li>
                <!-- // item accordionMenu Forms -->
                <li class="accordion-group">
                    <div class="accordion-heading"> <a href="#accTables" data-parent="#mainSideMenu" data-toggle="collapse" class="accordion-toggle"> <span class="item-icon fontello-icon-align-justify"></span> <i class="chevron fontello-icon-right-open-3"></i> Tables </a> </div>
                    <ul class="accordion-content nav nav-list collapse" id="accTables">
                        <li> <a href="component-table.html"> <i class="fontello-icon-right-dir"></i> Base Table </a> </li>
                        <li> <a href="component-table-boo.html"> <i class="fontello-icon-right-dir"></i> Boo Table </a> </li>
                        <li> <a href="component-table-datatable.html"> <i class="fontello-icon-right-dir"></i> DataTable </a> </li>
                    </ul>
                </li>
                <!-- // item accordionMenu Tables -->
                <li class="accordion-group">
                    <div class="accordion-heading"> <a href="#accStatistics" data-parent="#mainSideMenu" data-toggle="collapse" class="accordion-toggle"> <span class="item-icon fontello-icon-chart"></span> <i class="chevron fontello-icon-right-open-3"></i> Statistics </a> </div>
                    <ul class="accordion-content nav nav-list collapse" id="accStatistics">
                        <li> <a href="statistic-flot.html"> <i class="fontello-icon-right-dir"></i> Charts </a> </li>
                        <li> <a href="statistic-sparkline.html"> <i class="fontello-icon-right-dir"></i> Sparklines </a> </li>
                    </ul>
                </li>
                <!-- // item accordionMenu Statistics -->
                <li class="accordion-group">
                    <div class="accordion-heading"> <a href="#accWidgets" data-parent="#mainSideMenu" data-toggle="collapse" class="accordion-toggle"> <span class="item-icon  fontello-icon-window"></span> <i class="chevron fontello-icon-right-open-3"></i> Widgets </a> </div>
                    <ul class="accordion-content nav nav-list collapse" id="accWidgets">
                        <li> <a href="component-widget-style.html"> <i class="fontello-icon-right-dir"></i> <span class="hidden-tablet">Widgets </span> Style </a> </li>
                        <li> <a href="component-widget-custom.html"> <i class="fontello-icon-right-dir"></i> <span class="hidden-tablet">Widgets </span> Custom </a> </li>
                    </ul>
                </li>
                <!-- // item accordionMenu Widgets -->
                <li class="accordion-group">
                    <div class="accordion-heading"> <a href="#accButtons" data-parent="#mainSideMenu" data-toggle="collapse" class="accordion-toggle"> <span class="item-icon fontello-icon-puzzle"></span> <i class="chevron fontello-icon-right-open-3"></i> UI Elements </a> </div>
                    <ul class="accordion-content nav nav-list collapse" id="accButtons">
                        <li> <a href="elements-button.html"> <i class="fontello-icon-right-dir"></i> Button </a> </li>
                        <li> <a href="elements-icon-font.html"> <i class="fontello-icon-right-dir"></i> Iconic fonts </a> </li>
                        <li> <a href="elements-icon-fugue-demo.html"> <i class="fontello-icon-right-dir"></i> Icon </a> </li>
                        <li> <a href="elements-wells.html"> <i class="fontello-icon-right-dir"></i> Wells </a> </li>
                        <li> <a href="elements-tabs.html"> <i class="fontello-icon-right-dir"></i> Tabs </a> </li>
                        <li> <a href="elements-modals.html"> <i class="fontello-icon-right-dir"></i> Modal </a> </li>
                        <li> <a href="elements-progressbar.html"> <i class="fontello-icon-right-dir"></i> Progressbar </a> </li>
                    </ul>
                </li>
                <!-- // item accordionMenu UI Elements -->
                <li class="accordion-group">
                    <div class="accordion-heading"> <a href="#accCalendar" data-parent="#mainSideMenu" data-toggle="collapse" class="accordion-toggle"> <span class="item-icon fontello-icon-calendar"></span> <i class="chevron fontello-icon-right-open-3"></i> Calendar </a> </div>
                    <ul class="accordion-content nav nav-list collapse" id="accCalendar">
                        <li> <a href="component-fullcalendar-demo.html"> <i class="fontello-icon-right-dir"></i> <span class="hidden-tablet">Calendar </span> Demo </a> </li>
                        <li> <a href="component-fullcalendar.html"> <i class="fontello-icon-right-dir"></i> <span class="hidden-tablet">Calendar </span> Style </a> </li>
                    </ul>
                </li>
                <!-- // item accordionMenu Calendar -->
            </ul>
            <!-- // sidebar menu -->
            
            <div class="sidebar-item"></div>
            <!-- // sidebar item --> 
            
        </div>
        <!-- // sidebar -->
        
        <div id="main-content" class="main-content container-fluid">
            <div class="row-fluid page-head">
                <h2 class="page-title"><i class="aweso-icon-list-alt"></i> Forms Wizard <small>bootstrap style</small></h2>
                <p class="pagedesc">Builds a wizard out of a formatter tabbable structure.</p>
                <div class="page-bar">
                    <div class="btn-toolbar">
                        <ul class="nav nav-tabs pull-right">
                            <li class="active" id="user-tab"> <a href="#TabTop1" data-toggle="tab">Sample Wizard</a> </li>
                            <li class="disabled" id="articles-tab"> <a href="#TabTop2" data-toggle="tab">Documentation</a> </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- // page head -->
            
            <div id="page-content" class="page-content tab-content overflow-y">
                <div class="row-fluid">
                    <div class="span4 grider">
                        <div class="page-header">
                            <h3><i class="aweso-icon-list-alt opaci35"></i> Basic Wizard <small>default</small></h3>
                        </div>
                        <div id="wizard" class="wizard">
                            <div class="navbar">
                                <div class="navbar-inner">
                                    <div class="container">
                                        <ul>
                                            <li><a href="#tab1a" data-toggle="tab">First</a></li>
                                            <li><a href="#tab2a" data-toggle="tab">Second</a></li>
                                            <li><a href="#tab3a" data-toggle="tab">Third</a></li>
                                            <li><a href="#tab4a" data-toggle="tab">Forth</a></li>
                                            <li><a href="#tab5a" data-toggle="tab">Fifth</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-content">
                                <div class="tab-pane well" id="tab1a">
                                    <p>Lorem ipsum dolor sit amet consectetuer nunc Nam quis fermentum leo. Laoreet nonummy neque Vivamus consequat dictum nulla interdum Nam fermentum et. Ut elit Aenean cursus pede Nunc justo ligula in Suspendisse mauris.</p>
                                </div>
                                <div class="tab-pane well bg-yellow-light" id="tab2a">
                                    <p>Lorem ipsum dolor sit amet consectetuer nunc Nam quis fermentum leo. Laoreet nonummy neque Vivamus consequat dictum nulla interdum Nam fermentum et. Ut elit Aenean cursus pede Nunc justo ligula in Suspendisse mauris.</p>
                                </div>
                                <div class="tab-pane well bg-green-light" id="tab3a">
                                    <p>Lorem ipsum dolor sit amet consectetuer nunc Nam quis fermentum leo. Laoreet nonummy neque Vivamus consequat dictum nulla interdum Nam fermentum et. Ut elit Aenean cursus pede Nunc justo ligula in Suspendisse mauris.</p>
                                </div>
                                <div class="tab-pane well bg-blue-light" id="tab4a">
                                    <p>Lorem ipsum dolor sit amet consectetuer nunc Nam quis fermentum leo. Laoreet nonummy neque Vivamus consequat dictum nulla interdum Nam fermentum et. Ut elit Aenean cursus pede Nunc justo ligula in Suspendisse mauris.</p>
                                </div>
                                <div class="tab-pane well well-black" id="tab5a">
                                    <p>Lorem ipsum dolor sit amet consectetuer nunc Nam quis fermentum leo. Laoreet nonummy neque Vivamus consequat dictum nulla interdum Nam fermentum et. Ut elit Aenean cursus pede Nunc justo ligula in Suspendisse mauris.</p>
                                </div>
                                <hr>
                                <ul class="pager wizard">
                                    <li class="previous first" style="display:none;"><a href="#">First</a></li>
                                    <li class="previous"><a href="#">Previous</a></li>
                                    <li class="next last" style="display:none;"><a href="#">Last</a></li>
                                    <li class="next"><a href="#">Next</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!-- // column -->
                    
                    <div class="span4 grider">
                        <div class="page-header">
                            <h3><i class="aweso-icon-list-alt opaci35"></i> Basic Wizard <small>tabs or tabbable</small></h3>
                        </div>
                        <div class="well well-nice">
                            <form id="wizard-tabs" class="form-condensed margin-00" method="" action="#">
                                <div class="tabbable tabbable-bordered tabs-top">
                                    <ul class="_hidden">
                                        <li><a href="#tab1TA" data-toggle="tab">First</a></li>
                                        <li><a href="#tab2TA" data-toggle="tab">Second</a></li>
                                        <li><a href="#tab3TA" data-toggle="tab">Third</a></li>
                                        <li><a href="#tab4TA" data-toggle="tab">Forth</a></li>
                                    </ul>
                                    <div class="tab-content" style="min-height:150px">
                                        <div class="tab-pane" id="tab1TA">
                                            <div class="control-group">
                                                <label for="FirstNameTA" class="control-label">First Name <span class="required">*</span></label>
                                                <div class="controls">
                                                    <input id="FirstNameTA" class="input-block-level" type="text" name="FirstNameTA" value="">
                                                </div>
                                            </div>
                                            <!-- // form item -->
                                            
                                            <div class="control-group">
                                                <label for="LastNameTA" class="control-label">Last Name <span class="required">*</span></label>
                                                <div class="controls">
                                                    <input id="LastNameTA" class="input-block-level" type="text" name="LastNameTA" value="">
                                                </div>
                                            </div>
                                            <!-- // form item --> 
                                        </div>
                                        <!-- // tab1 -->
                                        
                                        <div class="tab-pane" id="tab2TA">
                                            <div class="control-group">
                                                <label for="emailTA" class="control-label">Email <span class="required">*</span></label>
                                                <div class="controls">
                                                    <input id="emailTA" class="input-block-level" type="email" name="emailTA" value="">
                                                </div>
                                            </div>
                                            <!-- // form item -->
                                            
                                            <div class="control-group">
                                                <label for="phoneTA" class="control-label">Phone <span class="required">*</span></label>
                                                <div class="controls">
                                                    <input id="phoneTA" class="input-block-level" type="password" name="phoneTA" value="">
                                                </div>
                                            </div>
                                            <!-- // form item --> 
                                        </div>
                                        <!-- // tab2 -->
                                        
                                        <div class="tab-pane" id="tab3TA">
                                            <div class="control-group">
                                                <label for="passwordTA" class="control-label">Password <span class="required">*</span></label>
                                                <div class="controls">
                                                    <input id="passwordTA" class="input-block-level" type="password" name="passwordTA" value="">
                                                </div>
                                            </div>
                                            <!-- // form item -->
                                            
                                            <div class="control-group">
                                                <label for="confPasswordTA" class="control-label">Confirm Password <span class="required">*</span></label>
                                                <div class="controls">
                                                    <input id="confPasswordTA" class="input-block-level" type="password" name="confPasswordTA" value="">
                                                </div>
                                            </div>
                                            <!-- // form item --> 
                                        </div>
                                        <!-- // tab3 -->
                                        
                                        <div class="tab-pane" id="tab4TA">
                                            <p>Lorem ipsum dolor sit amet consectetuer nunc Nam quis fermentum leo. Laoreet nonummy neque Vivamus consequat dictum nulla interdum Nam fermentum et. Ut elit Aenean cursus pede Nunc justo ligula in Suspendisse mauris.</p>
                                            <label class="checkbox">
                                                <input class="checkbox" type="checkbox" value="option1">
                                                Lorem ipsum dolor sit amet </label>
                                            <!-- // form item --> 
                                        </div>
                                        <!-- // tab3 -->
                                        <ul class="pager wizard margin-xs">
                                            <li class="previous"><a href="javascript:void(0);">Previous</a></li>
                                            <li class="next"><a href="javascript:void(0);">Next</a></li>
                                            <button type="submit" class="next save btn btn-green pull-right" href="javascript:void(0);">Send form</button>
                                        </ul>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <!-- // column --> 
                    
                </div>
                <!-- // example row -->
                
                <div class="row-fluid">
                    <div class="span4 grider">
                        <div class="page-header">
                            <h3><i class="aweso-icon-list-alt opaci35"></i> Basic Wizard <small>tabs disabled</small></h3>
                        </div>
                        <div id="wizard-left" class="well well-nice">
                            <div class="tabbable tabbable-bordered tabs-left">
                                <ul>
                                    <li><a href="#tab1TL" data-toggle="tab">First</a></li>
                                    <li><a href="#tab2TL" data-toggle="tab">Second</a></li>
                                    <li><a href="#tab3TL" data-toggle="tab">Third</a></li>
                                    <li><a href="#tab4TL" data-toggle="tab">Forth</a></li>
                                </ul>
                                <div class="tab-content" style="min-height:150px">
                                    <div class="tab-pane" id="tab1TL">
                                        <div class="control-group">
                                            <label for="FirstNameTL" class="control-label">First Name <span class="required">*</span></label>
                                            <div class="controls">
                                                <input id="FirstNameTL" class="input-block-level" type="text" name="FirstNameTL" value="">
                                            </div>
                                        </div>
                                        <!-- // form item -->
                                        
                                        <div class="control-group">
                                            <label for="LastNameTL" class="control-label">Last Name <span class="required">*</span></label>
                                            <div class="controls">
                                                <input id="LastNameTL" class="input-block-level" type="text" name="LastNameTL" value="">
                                            </div>
                                        </div>
                                        <!-- // form item --> 
                                    </div>
                                    <!-- // tab1 -->
                                    
                                    <div class="tab-pane" id="tab2TL">
                                        <div class="control-group">
                                            <label for="emailTL" class="control-label">Email <span class="required">*</span></label>
                                            <div class="controls">
                                                <input id="emailTL" class="input-block-level" type="email" name="emailTL" value="">
                                            </div>
                                        </div>
                                        <!-- // form item -->
                                        
                                        <div class="control-group">
                                            <label for="phoneTL" class="control-label">Phone <span class="required">*</span></label>
                                            <div class="controls">
                                                <input id="phoneTL" class="input-block-level" type="password" name="phoneTL" value="">
                                            </div>
                                        </div>
                                        <!-- // form item --> 
                                    </div>
                                    <!-- // tab2 -->
                                    
                                    <div class="tab-pane" id="tab3TL">
                                        <div class="control-group">
                                            <label for="passwordTL" class="control-label">Password <span class="required">*</span></label>
                                            <div class="controls">
                                                <input id="passwordTL" class="input-block-level" type="password" name="passwordTL" value="">
                                            </div>
                                        </div>
                                        <!-- // form item -->
                                        
                                        <div class="control-group">
                                            <label for="confPasswordTL" class="control-label">Confirm Password <span class="required">*</span></label>
                                            <div class="controls">
                                                <input id="confPasswordTL" class="input-block-level" type="password" name="confPasswordTL" value="">
                                            </div>
                                        </div>
                                        <!-- // form item --> 
                                    </div>
                                    <!-- // tab3 -->
                                    
                                    <div class="tab-pane" id="tab4TL">
                                        <p>Lorem ipsum dolor sit amet consectetuer nunc Nam quis fermentum leo. Laoreet nonummy neque Vivamus consequat dictum nulla interdum Nam fermentum et. Ut elit Aenean cursus pede Nunc justo ligula in Suspendisse mauris.</p>
                                        <label class="checkbox">
                                            <input class="checkbox" type="checkbox" value="option1">
                                            Lorem ipsum dolor sit amet </label>
                                        <!-- // form item --> 
                                    </div>
                                    <!-- // tab3 --> 
                                </div>
                            </div>
                            <ul class="pager wizard margin-ms">
                                <li class="previous first" style="display:none"><a href="javascript:void(0);">First</a></li>
                                <li class="previous"><a href="javascript:void(0);">Previous</a></li>
                                <li class="next last" style="display:none"><a href="javascript:void(0);">Last</a></li>
                                <li class="next"><a href="javascript:void(0);">Next</a></li>
                            </ul>
                        </div>
                    </div>
                    <!-- // column -->
                    
                    <div class="span4 grider">
                        <div class="page-header">
                            <h3><i class="aweso-icon-list-alt opaci35"></i> Basic Wizard <small>only tabs and submit</small></h3>
                        </div>
                        <div class="well well-nice">
                            <form id="wizard-below" class="form-condensed margin-0s" method="" action="#">
                                <div class="tabbable tabbable-bordered tabs-below">
                                    <div class="tab-content" style="min-height:150px">
                                        <div class="tab-pane" id="tab1TB">
                                            <div class="control-group">
                                                <label for="FirstNameTB" class="control-label">First Name <span class="required">*</span></label>
                                                <div class="controls">
                                                    <input id="FirstNameTB" class="input-block-level" type="text" name="FirstNameTB" value="">
                                                </div>
                                            </div>
                                            <!-- // form item -->
                                            
                                            <div class="control-group">
                                                <label for="LastNameTB" class="control-label">Last Name <span class="required">*</span></label>
                                                <div class="controls">
                                                    <input id="LastNameTB" class="input-block-level" type="text" name="LastNameTB" value="">
                                                </div>
                                            </div>
                                            <!-- // form item --> 
                                        </div>
                                        <!-- // tab1 -->
                                        
                                        <div class="tab-pane" id="tab2TB">
                                            <div class="control-group">
                                                <label for="emailTB" class="control-label">Email <span class="required">*</span></label>
                                                <div class="controls">
                                                    <input id="emailTB" class="input-block-level" type="email" name="emailTB" value="">
                                                </div>
                                            </div>
                                            <!-- // form item -->
                                            
                                            <div class="control-group">
                                                <label for="phoneTB" class="control-label">Phone <span class="required">*</span></label>
                                                <div class="controls">
                                                    <input id="phoneTB" class="input-block-level" type="password" name="phoneTB" value="">
                                                </div>
                                            </div>
                                            <!-- // form item --> 
                                        </div>
                                        <!-- // tab2 -->
                                        
                                        <div class="tab-pane" id="tab3TB">
                                            <div class="control-group">
                                                <label for="passwordTB" class="control-label">Password <span class="required">*</span></label>
                                                <div class="controls">
                                                    <input id="passwordTB" class="input-block-level" type="password" name="passwordTB" value="">
                                                </div>
                                            </div>
                                            <!-- // form item -->
                                            
                                            <div class="control-group">
                                                <label for="confPasswordTB" class="control-label">Confirm Password <span class="required">*</span></label>
                                                <div class="controls">
                                                    <input id="confPasswordTB" class="input-block-level" type="password" name="confPasswordTB" value="">
                                                </div>
                                            </div>
                                            <!-- // form item --> 
                                        </div>
                                        <!-- // tab3 -->
                                        
                                        <div class="tab-pane" id="tab4TB">
                                            <p>Lorem ipsum dolor sit amet consectetuer nunc Nam quis fermentum leo. Laoreet nonummy neque Vivamus consequat dictum nulla interdum Nam fermentum et. Ut elit Aenean cursus pede Nunc justo ligula in Suspendisse mauris.</p>
                                            <label class="checkbox">
                                                <input class="checkbox" type="checkbox" value="option1">
                                                Lorem ipsum dolor sit amet </label>
                                            <!-- // form item --> 
                                        </div>
                                        <!-- // tab3 --> 
                                        
                                    </div>
                                    <ul>
                                        <li><a href="#tab1TB" data-toggle="tab">Step 1.</a></li>
                                        <li><a href="#tab2TB" data-toggle="tab">Step 2.</a></li>
                                        <li><a href="#tab3TB" data-toggle="tab">Step 3.</a></li>
                                        <li><a href="#tab4TB" data-toggle="tab">Step 4.</a></li>
                                        <div class="send-wizard pull-right">
                                            <button type="submit" class="next save btn btn-green margin-ss" href="javascript:void(0);">Send form</button>
                                        </div>
                                    </ul>
                                </div>
                            </form>
                        </div>
                    </div>
                    <!-- // column --> 
                    
                </div>
                <!-- // example row -->
                
                <div class="row-fluid">
                    <div class="span8 grider">
                        <div class="page-header">
                            <h3><i class="aweso-icon-list-alt opaci35"></i> Wizard <small>custom button</small></h3>
                        </div>
                        <div class="well well-nice wizard">
                            <form id="wizard-nice" class="form-horizontal form-dark" method="" action="#" >
                                <h3>
                                    <div class="number-page pull-right"></div>
                                    <i class="fontello-icon-user-4"></i> New Account <small> wizard form</small></h3>
                                <div class="btn-toolbar">
                                    <ul class="margin-0s">
                                        <li><a href="#tab1c" data-toggle="tab">Username</a></li>
                                        <li><a href="#tab2c" data-toggle="tab">Password</a></li>
                                        <li><a href="#tab3c" data-toggle="tab">Email</a></li>
                                    </ul>
                                </div>
                                <hr class="margin-00">
                                <div class="tab-content">
                                    <div class="tab-pane" id="tab1c">
                                        <ul class="form-list label-left list-bordered dotted">
                                            <li class="control-group">
                                                <label for="nameNice" class="control-label">Name</label>
                                                <div class="controls">
                                                    <input id="nameNice" class="span6" type="text" value="" name="nameNice">
                                                </div>
                                            </li>
                                            <!-- // form item -->
                                            
                                            <li class="control-group">
                                                <label for="userNice" class="control-label">Username</label>
                                                <div class="controls">
                                                    <input id="userNice" class="span6" type="text" value="" name="userNice">
                                                    <p class="help-block">Lorem ipsum dolor sit amet consectetuer convallis nisl dolor tellus porta. Curabitur accumsan tempus semper eget Aliquam ante Aliquam Curabitur odio tincidunt.</p>
                                                </div>
                                            </li>
                                            <!-- // form item -->
                                        </ul>
                                    </div>
                                    <!-- // tab1 -->
                                    
                                    <div class="tab-pane" id="tab2c">
                                        <ul class="form-list label-left list-bordered dotted">
                                            <li class="control-group">
                                                <label for="passwordNice" class="control-label">Password</label>
                                                <div class="controls">
                                                    <input id="passwordNice" class="span4" type="password" value="" name="passwordNice">
                                                </div>
                                            </li>
                                            <!-- // form item -->
                                            
                                            <li class="control-group">
                                                <label for="passwordConNice" class="control-label">Confirm Password</label>
                                                <div class="controls">
                                                    <input id="passwordConNice" class="span4" type="password" value="" name="passwordConNice">
                                                    <p class="help-block">Lorem ipsum dolor sit amet consectetuer convallis nisl dolor tellus porta. Curabitur accumsan tempus semper eget Aliquam ante Aliquam Curabitur odio tincidunt.</p>
                                                </div>
                                            </li>
                                            <!-- // form item -->
                                        </ul>
                                    </div>
                                    <!-- // tab2 -->
                                    
                                    <div class="tab-pane" id="tab3c">
                                        <ul class="form-list label-left list-bordered dotted">
                                            <li class="control-group">
                                                <label for="emailNice" class="control-label">Email</label>
                                                <div class="controls">
                                                    <input id="emailNice" class="span6" type="text" value="" name="emailNice">
                                                </div>
                                            </li>
                                            <!-- // form item -->
                                            
                                            <li class="control-group">
                                                <div class="controls">
                                                    <p class="help-block">Lorem ipsum dolor sit amet consectetuer convallis nisl dolor tellus porta. Curabitur accumsan tempus semper eget Aliquam ante Aliquam Curabitur odio tincidunt.</p>
                                                </div>
                                            </li>
                                            <!-- // form item -->
                                        </ul>
                                    </div>
                                    <!-- // tab3 -->
                                    
                                    <ul class="wizard-action">
                                        <li><a class="previous btn" href="javascript:void(0);">Previous</a></li>
                                        <li><a class="next btn" href="javascript:void(0);">Next</a></li>
                                        <li><a class="next save btn btn-green pull-right" href="javascript:void(0);">Send form</a></li>
                                    </ul>
                                    <!-- // Action --> 
                                    
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <!-- // example row -->
                
                <div class="row-fluid">
                    <div class="span8 grider">
                        <div class="page-header">
                            <h3><i class="aweso-icon-list-alt opaci35"></i> Wizard <small>only button</small></h3>
                        </div>
                        <div class="well well-black wizard">
                            <form id="wizard-black" class="form-horizontal form-dark" method="" action="#" >
                                <h3 class="simple-header"><i class="fontello-icon-user-4"></i> Registration <small> Create New Account</small></h3>
                                <ul class="margin-0s hidden">
                                    <li><a href="#tab1d" data-toggle="tab">Username</a></li>
                                    <li><a href="#tab2d" data-toggle="tab">Password</a></li>
                                    <li><a href="#tab3d" data-toggle="tab">Email</a></li>
                                </ul>
                                <div class="tab-content">
                                    <div class="tab-pane" id="tab1d">
                                        <ul class="form-list label-left list-bordered dotted">
                                            <li class="control-group">
                                                <label for="namehd" class="control-label">Name</label>
                                                <div class="controls">
                                                    <input id="namehd" class="span6" type="text" value="" name="namehd">
                                                </div>
                                            </li>
                                            <!-- // form item -->
                                            
                                            <li class="control-group">
                                                <label for="userhd" class="control-label">Username</label>
                                                <div class="controls">
                                                    <input id="userhd" class="span6" type="text" value="" name="userhd">
                                                    <p class="help-block">Lorem ipsum dolor sit amet consectetuer convallis nisl dolor tellus porta. Curabitur accumsan tempus semper eget Aliquam ante Aliquam Curabitur odio tincidunt.</p>
                                                </div>
                                            </li>
                                            <!-- // form item -->
                                        </ul>
                                    </div>
                                    <!-- // tab1 -->
                                    
                                    <div class="tab-pane" id="tab2d">
                                        <ul class="form-list label-left list-bordered dotted">
                                            <li class="control-group">
                                                <label for="passwordD" class="control-label">Password</label>
                                                <div class="controls">
                                                    <input id="passwordD" class="span4" type="password" value="" name="passwordD">
                                                </div>
                                            </li>
                                            <!-- // form item -->
                                            
                                            <li class="control-group">
                                                <label for="passwordConD" class="control-label">Confirm Password</label>
                                                <div class="controls">
                                                    <input id="passwordConD" class="span4" type="password" value="" name="passwordConD">
                                                    <p class="help-block">Lorem ipsum dolor sit amet consectetuer convallis nisl dolor tellus porta. Curabitur accumsan tempus semper eget Aliquam ante Aliquam Curabitur odio tincidunt.</p>
                                                </div>
                                            </li>
                                            <!-- // form item -->
                                        </ul>
                                    </div>
                                    <!-- // tab1 -->
                                    
                                    <div class="tab-pane" id="tab3d">
                                        <ul class="form-list label-left list-bordered dotted">
                                            <li class="control-group">
                                                <label for="emailD" class="control-label">Email</label>
                                                <div class="controls">
                                                    <input id="emailD" class="span6" type="email" value="" name="emailD">
                                                </div>
                                            </li>
                                            <!-- // form item -->
                                            
                                            <li class="control-group">
                                                <div class="controls">
                                                    <p>Lorem ipsum dolor sit amet consectetuer convallis nisl dolor tellus porta. Curabitur accumsan tempus semper eget Aliquam ante Aliquam Curabitur odio tincidunt.</p>
                                                </div>
                                            </li>
                                            <!-- // form item -->
                                        </ul>
                                    </div>
                                    <!-- // tab1 -->
                                    
                                    <div class="control-group">
                                        <div class="controls">
                                            <ul class="wizard-action">
                                                <li><a class="previous btn btn-inverse" href="javascript:void(0);"><i class="fontello-icon-left-circle2"></i> Previous</a></li>
                                                <li><a class="next btn btn-inverse" href="javascript:void(0);">Next <i class="fontello-icon-right-circle2"></i></a></li>
                                                <li>
                                                    <button type="submit" class="next finish btn btn-green" href="javascript:void(0);">Send form <i class="fontello-icon-check"></i></button>
                                                </li>
                                                <li><a class="next cancel btn btn-red" href="javascript:void(0);">Cancel</i></a></li>
                                                <li>
                                                    <div class="number-page pull-right"></div>
                                                </li>
                                            </ul>
                                            <!-- // Action --> 
                                        </div>
                                    </div>
                                    <!-- // control grup --> 
                                    
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <!-- // example row -->
                
                <div class="row-fluid">
                    <div class="span8 grider">
                        <div class="page-header">
                            <h3><i class="aweso-icon-list-alt opaci35"></i> Wizard <small>full settings</small></h3>
                        </div>
                        <div class="well well-nice wizard">
                            <form id="wizard-progress" class="form-horizontal form-dark" method="" action="#" >
                                <div class="navbar navbar-inverse">
                                    <div class="navbar-inner">
                                        <div class="container">
                                            <ul>
                                                <li><a href="#tab1e" data-toggle="tab">First</a></li>
                                                <li><a href="#tab2e" data-toggle="tab">Second</a></li>
                                                <li><a href="#tab3e" data-toggle="tab">Third</a></li>
                                                <li><a href="#tab4e" data-toggle="tab">Forth</a></li>
                                                <li><a href="#tab5e" data-toggle="tab">Fifth</a></li>
                                                <li><a href="#tab6e" data-toggle="tab">Sixth</a></li>
                                            </ul>
                                            <div class="number-page pull-right"></div>
                                        </div>
                                    </div>
                                </div>
                                <div id="bar" class="progress _progress-success progress-mini filled3">
                                    <div class="filler">
                                        <div class="bar"></div>
                                    </div>
                                </div>
                                <div class="tab-content">
                                    <div class="tab-pane" id="tab1e">
                                        <div class="row-fluid">
                                            <div class="span12">
                                                <fieldset>
                                                    <legend><i class="fontello-icon-user-4"></i> Persona´s name <span> New Account form</span></legend>
                                                    <ul class="form-list label-left list-bordered dotted">
                                                        <li class="control-group">
                                                            <label for="accNewPrefix" class="control-label">Prefix</label>
                                                            <div class="controls">
                                                                <input id="accNewPrefix" class="span6" type="text" value="" name="accNewPrefix">
                                                            </div>
                                                        </li>
                                                        <!-- // form item -->
                                                        
                                                        <li class="control-group">
                                                            <label for="accNewFirstName" class="control-label">First Name <span class="required">*</span></label>
                                                            <div class="controls">
                                                                <input id="accNewFirstName" class="span11" type="text" name="accNewFirstName" value="">
                                                            </div>
                                                        </li>
                                                        <!-- // form item -->
                                                        
                                                        <li class="control-group">
                                                            <label for="accNewLastName" class="control-label">Last Name <span class="required">*</span></label>
                                                            <div class="controls">
                                                                <input id="accNewLastName" class="span11" type="text" name="accNewLastName" value="">
                                                            </div>
                                                        </li>
                                                        <!-- // form item -->
                                                        
                                                        <li class="control-group">
                                                            <label for="accNewSuffix" class="control-label">Suffix</label>
                                                            <div class="controls">
                                                                <input id="accNewSuffix" class="span6" type="text" name="accNewSuffix" value="">
                                                            </div>
                                                        </li>
                                                        <!-- // form item -->
                                                        
                                                    </ul>
                                                </fieldset>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- // tab1 -->
                                    
                                    <div class="tab-pane" id="tab2e">
                                        <div class="row-fluid">
                                            <div class="span12">
                                                <fieldset>
                                                    <legend><i class="fontello-icon-vcard"></i> Personal Data <span> Default wizard legend</span></legend>
                                                    <ul class="form-list label-left list-bordered dotted">
                                                        <li class="control-group">
                                                            <label for="accNewMaritalStatus" class="control-label">Marital Status</label>
                                                            <div class="controls">
                                                                <input id="accNewMaritalStatus" class="span6" type="text" name="accNewMaritalStatus" value="">
                                                            </div>
                                                        </li>
                                                        <!-- // form item -->
                                                        
                                                        <li class="control-group">
                                                            <label for="accNewGenderInput" class="control-label">Gender</label>
                                                            <div class="controls">
                                                                <input id="accNewGenderInput" type="hidden" name="accNewGender" value="" />
                                                                <div id="accNewGender" class="btn-group change" data-toggle="buttons-radio" data-target="accNewGenderInput">
                                                                    <button type="button" class="btn" class-toggle="btn-green" name="accNewGender" value="male">&nbsp; Male &nbsp;</button>
                                                                    <button type="button" class="btn" class-toggle="btn-green" name="accNewGender" value="female">Female</button>
                                                                </div>
                                                            </div>
                                                        </li>
                                                        <!-- // form item -->
                                                        
                                                        <li class="control-group">
                                                            <label for="accNewDob" class="control-label">Date Of Birth <span class="required">*</span></label>
                                                            <div class="controls">
                                                                <input id="accNewDob" class="span6" type="text" name="accNewDob" value="">
                                                            </div>
                                                        </li>
                                                        <!-- // form item -->
                                                        
                                                        <li class="control-group">
                                                            <label for="accNewAge" class="control-label">Age</label>
                                                            <div class="controls">
                                                                <input id="accNewAge" class="span4" type="text" name="accNewAge" value="">
                                                            </div>
                                                        </li>
                                                        <!-- // form item -->
                                                        
                                                    </ul>
                                                </fieldset>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- // tab2 -->
                                    
                                    <div class="tab-pane" id="tab3e">
                                        <div class="row-fluid">
                                            <div class="span12">
                                                <fieldset>
                                                    <legend><i class="fontello-icon-bag"></i> Dates of employment <span> Default wizard legend</span></legend>
                                                    <ul class="form-list label-left list-bordered dotted">
                                                        <li class="control-group">
                                                            <label for="accNewEmployer" class="control-label">Employer</label>
                                                            <div class="controls">
                                                                <input id="accNewEmployer" class="span11" type="text" name="accNewEmployer" value="">
                                                            </div>
                                                        </li>
                                                        
                                                        <!-- // form item -->
                                                        <li class="control-group">
                                                            <label for="accNewDepartment" class="control-label">Department</label>
                                                            <div class="controls">
                                                                <input id="accNewMiddleName" class="span11" type="text" name="accNewMiddleName" value="">
                                                            </div>
                                                        </li>
                                                        <!-- // form item -->
                                                        
                                                        <li class="control-group">
                                                            <label for="accNewJob" class="control-label">Account Job</label>
                                                            <div class="controls">
                                                                <input id="accNewJob" class="span11" type="text" name="accNewJob" value="">
                                                                <p class="help-block">Lorem ipsum dolor sit amet consectetuer convallis nisl dolor tellus porta. Curabitur accumsan tempus semper eget Aliquam ante Aliquam Curabitur odio tincidunt.</p>
                                                            </div>
                                                        </li>
                                                        <!-- // form item -->
                                                        
                                                    </ul>
                                                </fieldset>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- // tab3 -->
                                    
                                    <div class="tab-pane" id="tab4e">
                                        <div class="row-fluid">
                                            <div class="span12">
                                                <fieldset>
                                                    <legend><i class="fontello-icon-phone"></i> Contact info <span> Default wizard legend</span></legend>
                                                    <ul class="form-list label-left list-bordered dotted">
                                                        <li class="control-group">
                                                            <label for="accNewEmail" class="control-label">Email <span class="required">*</span></label>
                                                            <div class="controls">
                                                                <input id="accNewEmail" class="span11" type="text" name="accNewEmail" value="">
                                                            </div>
                                                        </li>
                                                        <!-- // form item -->
                                                        
                                                        <li class="control-group">
                                                            <label for="accNewPhoneNumber" class="control-label">Phone <span class="required">*</span></label>
                                                            <div class="controls">
                                                                <input id="accNewPhoneNumber" class="span6 maskPhone" type="text" name="accNewPhoneNumber" value="">
                                                            </div>
                                                        </li>
                                                        <!-- // form item -->
                                                        
                                                        <li class="control-group">
                                                            <label for="accNewFaxNumber" class="control-label">Fax</label>
                                                            <div class="controls">
                                                                <input id="accNewFaxNumber" class="span6 maskPhone" type="text" name="accNewFaxNumber" value="">
                                                            </div>
                                                        </li>
                                                        <!-- // form item -->
                                                        
                                                        <li class="control-group">
                                                            <div class="controls">
                                                                <p>Lorem ipsum dolor sit amet consectetuer convallis nisl dolor tellus porta.</p>
                                                            </div>
                                                        </li>
                                                        <!-- // form item -->
                                                        
                                                    </ul>
                                                </fieldset>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- // tab4 -->
                                    
                                    <div class="tab-pane" id="tab5e">
                                        <div class="row-fluid">
                                            <div class="span12">
                                                <fieldset>
                                                    <legend><i class="fontello-icon-home"></i> Address <span> Default wizard legend</span></legend>
                                                    <ul class="form-list label-left list-bordered dotted">
                                                        <li class="control-group">
                                                            <label for="accNewAddressStreet" class="control-label">Address <span class="required">*</span></label>
                                                            <div class="controls controls-row">
                                                                <input id="accNewAddressStreet" class="span6" type="text" value="" name="accNewAddressStreet">
                                                            </div>
                                                        </li>
                                                        <!-- // form item -->
                                                        
                                                        <li class="control-group">
                                                            <label for="accNewAddressCity" class="control-label">City <span class="required">*</span></label>
                                                            <div class="controls">
                                                                <input id="accNewAddressCity" class="span6" type="text" value="" name="accNewAddressCity">
                                                            </div>
                                                        </li>
                                                        <!-- // form item -->
                                                        
                                                        <li class="control-group">
                                                            <label for="accNewAddressState" class="control-label">State <span class="required">*</span></label>
                                                            <div class="controls">
                                                                <select id="accNewAddressState" class="span6" name="accNewAddressState">
                                                                    <option value="" selected="selected">Select a State</option>
                                                                    <option value="AL">Alabama</option>
                                                                    <option value="AK">Alaska</option>
                                                                    <option value="AZ">Arizona</option>
                                                                    <option value="AR">Arkansas</option>
                                                                    <option value="CA">California</option>
                                                                    <option value="CO">Colorado</option>
                                                                    <option value="CT">Connecticut</option>
                                                                    <option value="DE">Delaware</option>
                                                                    <option value="DC">District Of Columbia</option>
                                                                    <option value="FL">Florida</option>
                                                                    <option value="GA">Georgia</option>
                                                                    <option value="HI">Hawaii</option>
                                                                    <option value="ID">Idaho</option>
                                                                    <option value="IL">Illinois</option>
                                                                    <option value="IN">Indiana</option>
                                                                    <option value="IA">Iowa</option>
                                                                    <option value="KS">Kansas</option>
                                                                    <option value="KY">Kentucky</option>
                                                                    <option value="LA">Louisiana</option>
                                                                    <option value="ME">Maine</option>
                                                                    <option value="MD">Maryland</option>
                                                                    <option value="MA">Massachusetts</option>
                                                                    <option value="MI">Michigan</option>
                                                                    <option value="MN">Minnesota</option>
                                                                    <option value="MS">Mississippi</option>
                                                                    <option value="MO">Missouri</option>
                                                                    <option value="MT">Montana</option>
                                                                    <option value="NE">Nebraska</option>
                                                                    <option value="NV">Nevada</option>
                                                                    <option value="NH">New Hampshire</option>
                                                                    <option value="NJ">New Jersey</option>
                                                                    <option value="NM">New Mexico</option>
                                                                    <option value="NY">New York</option>
                                                                    <option value="NC">North Carolina</option>
                                                                    <option value="ND">North Dakota</option>
                                                                    <option value="OH">Ohio</option>
                                                                    <option value="OK">Oklahoma</option>
                                                                    <option value="OR">Oregon</option>
                                                                    <option value="PA">Pennsylvania</option>
                                                                    <option value="RI">Rhode Island</option>
                                                                    <option value="SC">South Carolina</option>
                                                                    <option value="SD">South Dakota</option>
                                                                    <option value="TN">Tennessee</option>
                                                                    <option value="TX">Texas</option>
                                                                    <option value="UT">Utah</option>
                                                                    <option value="VT">Vermont</option>
                                                                    <option value="VA">Virginia</option>
                                                                    <option value="WA">Washington</option>
                                                                    <option value="WV">West Virginia</option>
                                                                    <option value="WI">Wisconsin</option>
                                                                    <option value="WY">Wyoming</option>
                                                                </select>
                                                            </div>
                                                        </li>
                                                        <!-- // form item -->
                                                        
                                                        <li class="control-group">
                                                            <label for="accNewAddressZip" class="control-label">Zip / Postal code <span class="required">*</span></label>
                                                            <div class="controls">
                                                                <input id="accNewAddressZip" class="span4 maskZipcode" type="text" value="" name="accNewAddressZip">
                                                            </div>
                                                        </li>
                                                        <!-- // form item -->
                                                        
                                                    </ul>
                                                </fieldset>
                                                <!-- // fieldset Input --> 
                                            </div>
                                        </div>
                                    </div>
                                    <!-- // tab5 -->
                                    
                                    <div class="tab-pane summary" id="tab6e">
                                        <div class="row-fluid">
                                            <div class="span12">
                                                <fieldset>
                                                    <legend><i class="fontello-icon-th-list-4"></i> Overview form <span> Default wizard legend</span></legend>
                                                    <ul class="summary-list list-bordered dotted">
                                                        <li class="control-group row-fluid">
                                                            <div class="span6 well well-small well-nice">
                                                                <p><span class="label-field">Name</span> <span class="field bold">mr. Jonathan Somerson</span></p>
                                                                <p><span class="label-field">Marital Status</span> <span class="field">married</span></p>
                                                                <p><span class="label-field">Gender</span> <span class="field">man</span></p>
                                                                <p><span class="label-field">Date Of Birth</span> <span class="field">08/08/1978</span></p>
                                                                <p><span class="label-field">Age</span> <span class="field">34</span></p>
                                                            </div>
                                                        </li>
                                                        <!-- // form item -->
                                                        
                                                        <li class="control-group row-fluid">
                                                            <p><span class="label-field">Email</span> <span class="field bold">j.somerson@example.com</span></p>
                                                            <p><span class="label-field">Phone</span> <span class="field bold">(123) 456-7890</span></p>
                                                            <p><span class="label-field">fax</span> <span class="field">(123) 456-7890</span></p>
                                                        </li>
                                                        <!-- // form item -->
                                                        
                                                        <li class="control-group">
                                                            <p><span class="label-field">Address</span> <span class="field"> 795 Folsom Ave, Suite 600</span></p>
                                                            <p><span class="label-field">&nbsp;</span> <span class="field">San Francisco, CA 94107</span></p>
                                                        </li>
                                                        <!-- // form item -->
                                                        
                                                        <li class="control-group">
                                                            <p><span class="label-field">Employer</span> <span class="field">Twitter, Inc.</span></p>
                                                            <p><span class="label-field">Department</span> <span class="field">sales Department</span></p>
                                                            <p><span class="label-field">Job</span> <span class="field">Manager</span></p>
                                                        </li>
                                                        <!-- // form item -->
                                                        
                                                    </ul>
                                                </fieldset>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- // tab6 summary -->
                                    
                                    <ul class="wizard-action wizard-pager">
                                        <li><a class="previous first btn" href="javascript:void(0);">First</a></li>
                                        <li><a class="previous btn" href="javascript:void(0);"><i class="fontello-icon-left-circle2"></i> Previous</a></li>
                                        <li><a class="next last btn" href="javascript:void(0);">Last</a></li>
                                        <li><a class="next btn" href="javascript:void(0);">Next <i class="fontello-icon-right-circle2"></i></a></li>
                                        <li>
                                            <button type="submit" class="next finish btn btn-blue" href="javascript:void(0);">Send form</button>
                                        </li>
                                        <li><a class="next print btn btn-glyph" href="javascript:void(0);"><i class="fontello-icon-print-2"></i></a></li>
                                        <li><a class="next cancel btn" href="javascript:void(0);">Cancel</i></a></li>
                                    </ul>
                                    <!-- // Action --> 
                                    
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <!-- // example row - full -->
                
                <div class="row-fluid">
                    <div class="span8 grider">
                        <div class="page-header">
                            <h3><i class="aweso-icon-list-alt opaci35"></i> Wizard <small>navbar indicator</small></h3>
                        </div>
                        <div class="well well-black wizard">
                            <form id="wizard-idicator" class="form-horizontal" method="" action="#" >
                                <div class="navbar navbar-inverse">
                                    <div class="navbar-inner">
                                        <div class="container">
                                            <ul>
                                                <li><a href="#tab1f" data-toggle="tab">first step</a></li>
                                                <li><a href="#tab2f" data-toggle="tab">second step</a></li>
                                                <li><a href="#tab3f" data-toggle="tab">third ttep</a></li>
                                            </ul>
                                            <!-- use progress, progress-small or progress-mini  -->
                                            <div class="wizard-indicator">
                                                <div id="bar" class="progress progress-success progress-striped active filled3">
                                                    <div class="filler">
                                                        <div class="bar"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-content">
                                    <div class="tab-pane" id="tab1f">
                                        <ul class="form-list label-left list-bordered dotted">
                                            <li class="control-group">
                                                <label for="nameF" class="control-label">Name</label>
                                                <div class="controls">
                                                    <input id="nameF" class="span6" type="text" value="" name="nameF">
                                                </div>
                                            </li>
                                            <!-- // form item -->
                                            
                                            <li class="control-group">
                                                <label for="userF" class="control-label">Username</label>
                                                <div class="controls">
                                                    <input id="userF" class="span6" type="text" value="" name="userF">
                                                    <p class="help-block">Lorem ipsum dolor sit amet consectetuer convallis nisl dolor tellus porta. Curabitur accumsan tempus semper eget Aliquam ante Aliquam Curabitur odio tincidunt.</p>
                                                </div>
                                            </li>
                                            <!-- // form item -->
                                        </ul>
                                    </div>
                                    <!-- // tab1 -->
                                    
                                    <div class="tab-pane" id="tab2f">
                                        <ul class="form-list label-left list-bordered dotted">
                                            <li class="control-group">
                                                <label for="passwordF" class="control-label">Password</label>
                                                <div class="controls">
                                                    <input id="passwordF" class="span4" type="password" value="" name="passwordF">
                                                </div>
                                            </li>
                                            <!-- // form item -->
                                            
                                            <li class="control-group">
                                                <label for="passwordConF" class="control-label">Confirm Password</label>
                                                <div class="controls">
                                                    <input id="passwordConF" class="span4" type="password" value="" name="passwordConF">
                                                    <p class="help-block">Lorem ipsum dolor sit amet consectetuer convallis nisl dolor tellus porta. Curabitur accumsan tempus semper eget Aliquam ante Aliquam Curabitur odio tincidunt.</p>
                                                </div>
                                            </li>
                                            <!-- // form item -->
                                        </ul>
                                    </div>
                                    <!-- // tab1 -->
                                    
                                    <div class="tab-pane" id="tab3f">
                                        <ul class="form-list label-left list-bordered dotted">
                                            <li class="control-group">
                                                <label for="emailF" class="control-label">Email</label>
                                                <div class="controls">
                                                    <input id="emailF" class="span6" type="text" value="" name="emailF">
                                                </div>
                                            </li>
                                            <!-- // form item -->
                                            
                                            <li class="control-group">
                                                <div class="controls">
                                                    <p class="help-block">Lorem ipsum dolor sit amet consectetuer convallis nisl dolor tellus porta. Curabitur accumsan tempus semper eget Aliquam ante Aliquam Curabitur odio tincidunt.</p>
                                                </div>
                                            </li>
                                            <!-- // form item -->
                                        </ul>
                                    </div>
                                    <!-- // tab1 -->
                                    
                                    <ul class="wizard-action center">
                                        <li><a class="previous first btn btn-inverse pull-left" href="javascript:void(0);">First</a></li>
                                        <li><a class="previous btn" href="javascript:void(0);"><i class="fontello-icon-left-circle2"></i> Previous</a> </li>
                                        <li><a class="next btn" href="javascript:void(0);">Next <i class="fontello-icon-right-circle2"></i></a></li>
                                        <li><a class="next last btn btn-inverse pull-right" href="javascript:void(0);">Last</a> </li>
                                        <li>
                                            <button type="submit" class="next finish btn btn-green" href="javascript:void(0);">Send form</button>
                                        </li>
                                        <li><a class="next print btn _btn-glyph" href="javascript:void(0);"><i class="fontello-icon-print-2"></i></a> </li>
                                        <li>
                                            <div class="number-page pull-right"></div>
                                        </li>
                                    </ul>
                                    <!-- // Action --> 
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <!-- // example row --> 
                
            </div>
            <!-- // page content --> 
            
        </div>
        <!-- // main-content --> 
        
    </div>
    <!-- // main-container  -->
    
    <footer id="footer-fix">
        <div id="footer-sidebar" class="footer-sidebar">
            <div class="navbar">
                <div class="btn-toolbar"> <a class="btn btn-glyph btn-link" href="javascript:void(0);"><i class="fontello-icon-up-open-1"></i></a> </div>
            </div>
        </div>
        <!-- // footer sidebar -->
        
        <div id="footer-content" class="footer-content">
            <div class="navbar navbar-inverse">
                <div class="navbar-inner">
                    <ul class="nav pull-left">
                        <li class="divider-vertical hidden-phone"></li>
                        <li><a id="btnToggleSidebar" class="btn-glyph fontello-icon-resize-full-2 tip hidden-phone" href="javascript:void(0);" title="show hide sidebar"></a></li>
                        <li class="divider-vertical hidden-phone"></li>
                        <li><a id="btnChangeSidebar" class="btn-glyph fontello-icon-login tip hidden-phone" href="javascript:void(0);" title="change sidebar position"></a></li>
                        <li class="divider-vertical"></li>
                        <li><a id="btnChangeSidebarColor" class="btn-glyph fontello-icon-palette tip" href="javascript:void(0);" title="change sidebar color"></a></li>
                        <li class="divider-vertical"></li>
                        <li><a class="btn-glyph fontello-icon-cw" href="javascript:void(0);"></a></li>
                        <li class="divider-vertical"></li>
                        <li><a class="fontello-icon-home-3" href="dashboard-one.html"></a></li>
                        <li class="divider-vertical"></li>
                    </ul>
                    <ul class="nav pull-right">
                        <li class="divider-vertical"></li>
                        <li><a class="btn-glyph fontello-icon-help-2 tip" href="javascript:void(0);" title="help to page"></a></li>
                        <li class="divider-vertical"></li>
                        <li><a class="btn-glyph fontello-icon-cog-4 tip" href="javascript:void(0);" title="settings app"></a></li>
                        <li class="divider-vertical"></li>
                        <li><a id="btnLogout" class="btn-glyph fontello-icon-logout-1 tip" href="javascript:void(0);" title="logout"></a></li>
                        <li class="divider-vertical"></li>
                        <li><a id="btnScrollup" class="scrollup btn-glyph fontello-icon-up-open-1" href="javascript:void(0);"><span class="hidden-phone">Scroll</span></a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- // footer content --> 
        
    </footer>
    <!-- // footer-fix  --> 
    
</div>
<!-- // page-container  --> 

<!-- Le javascript --> 
<!-- Placed at the end of the document so the pages load faster --> 
<script src="assets/plugins/bootstrap-wysihtml5/lib/js/wysihtml5-0.3.0.min.js"></script> 
<script src="assets/js/lib/jquery.js"></script> 
<script src="assets/js/lib/jquery-ui.js"></script> 
<script src="assets/js/lib/bootstrap.js"></script> 
<script src="assets/js/lib/jquery.cookie.js"></script> 

<!-- Plugins Bootstrap --> 
<script src="assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js"></script> 
<script src="assets/plugins/bootstrap-timepicker/js/bootstrap-timepicker.js"></script> 
<script src="assets/plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.js"></script> 
<script src="assets/plugins/bootstrap-daterangepicker/js/date.js"></script> 
<script src="assets/plugins/bootstrap-daterangepicker/js/bootstrap-daterangepicker.js"></script> 
<script src="assets/plugins/bootstrap-fileupload/js/bootstrap-fileupload.js"></script> 
<script src="assets/plugins/bootstrap-rowlink/js/bootstrap-rowlink.js"></script> 
<script src="assets/plugins/bootstrap-progressbar/js/bootstrap-progressbar.js"></script> 
<script src="assets/plugins/bootstrap-wysihtml5/src/bootstrap-wysihtml5.js"></script> 
<script src="assets/plugins/bootstrap-select/bootstrap-select.js"></script> 
<script src="assets/plugins/bootstrap-bootbox/bootbox.min.js"></script> 
<script src="assets/plugins/bootstrap-modal/js/bootstrap-modalmanager.js"></script> 
<script src="assets/plugins/bootstrap-modal/js/bootstrap-modal.js"></script> 
<script src="assets/plugins/bootstrap-wizard/js/bootstrap-wizard.js"></script> 
<script src="assets/plugins/bootstrap-toggle-buttons/js/bootstrap-toggle-buttons.js"></script> 

<!-- Plugins Custom --> 
<script src="assets/plugins/google-code-prettify/prettify.js"></script> 
<script src="assets/plugins/nicescroll/jquery.nicescroll.min.js"></script> 
<script src="assets/plugins/qtip2/dist/jquery.qtip.min.js"></script> 
<script src="assets/plugins/list/js/list.min.js"></script> 
<script src="assets/plugins/list/plugins/list.paging.min.js"></script> 
<script src="assets/plugins/fullcalendar/fullcalendar.js"></script> 

<!-- Plugins Forms --> 
<script src="assets/plugins/uniform/jquery.uniform.js"></script> 
<script src="assets/plugins/select2/select2.min.js"></script> 
<script src="assets/plugins/counter/jquery.counter.js"></script> 
<script src="assets/plugins/elastic/jquery.elastic.js"></script> 
<script src="assets/plugins/inputmask/jquery.inputmask.js"></script> 
<script src="assets/plugins/inputmask/jquery.inputmask.extensions.js"></script> 
<script src="assets/plugins/validate/js/jquery.validate.min.js"></script> 
<script src="assets/plugins/xbreadcrumbs/xbreadcrumbs.js"></script> 

<!-- Charts --> 
<script src="assets/plugins/sparkline/jquery.sparkline.js"></script> 
<script src="assets/plugins/flot/jquery.flot.js"></script> 
<script src="assets/plugins/flot/jquery.flot.categories.js"></script> 
<script src="assets/plugins/flot/jquery.flot.grow.js"></script> 
<script src="assets/plugins/flot/jquery.flot.orderBars.js"></script> 
<script src="assets/plugins/flot/jquery.flot.pie.js"></script> 
<script src="assets/plugins/flot/jquery.flot.resize.js"></script> 
<script src="assets/plugins/flot/jquery.flot.selection.js"></script> 
<script src="assets/plugins/flot/jquery.flot.stack.js"></script> 
<script src="assets/plugins/flot/jquery.flot.stackpercent.js"></script> 
<script src="assets/plugins/flot/jquery.flot.time.js"></script> 

<!-- Plugins Tables --> 
<script src="assets/plugins/datatables/media/js/jquery.dataTables.js"></script> 
<script src="assets/plugins/datatables/plugin/jquery.dataTables.plugins.js"></script> 
<script src="assets/plugins/datatables/plugin/jquery.dataTables.columnFilter.js"></script> 

<!-- main js -->
<script src="assets/js/application.js"></script> 

<!-- Only This Demo Page --> 
<script>
$(document).ready(function () {
        // base - default setting
		$('#wizard').bootstrapWizard();
		
		// base - tabs top, submit button
		$('#wizard-tabs').bootstrapWizard({
                class: 'nav nav-tabs',
				onTabShow: function (tab, navigation, index) {
                        
						var $total = navigation.find('li').length;
                        var $current = index + 1;
						var $myWizard = $('#wizard-tabs');
						
						// If it's the last tab then hide the last button and show the finish instead
                        if($current >= $total) {
                                $myWizard.find('.wizard .next').hide();
								$myWizard.find('.wizard .save').show();
                                $myWizard.find('.wizard .save').removeClass('disabled');
                        } else {
                                $myWizard.find('.wizard .next').show();
								$myWizard.find('.wizard .save').hide();
                        }
                }
        });
		
		// base - tabs left, tabs disabled
        $('#wizard-left').bootstrapWizard({
                class: 'nav nav-tabs',
				onTabClick: function(tab, navigation, index) {
						alert('on tab click disabled, use navigation');
						return false;
				}
        });
		
		// base - tabs below, submit button, alert
		$('#wizard-below').bootstrapWizard({
                class: 'nav nav-tabs',
				nextSelector: '.send-wizard .next',
                previousSelector: '.send-wizard .previous',
                onTabShow: function (tab, navigation, index) {
                        
						var $total = navigation.find('li').length;
                        var $current = index + 1;
						
						// If it's the last tab then hide the last button and show the finish instead
                        if($current >= $total) {
                                $('#wizard-below').find('.send-wizard .next').hide();
								$('#wizard-below').find('.send-wizard .save').show();
                                $('#wizard-below').find('.send-wizard .save').removeClass('disabled');
                        } else {
                                $('#wizard-below').find('.send-wizard .next').show();
								$('#wizard-below').find('.send-wizard .save').hide();
                        }
                }
        });
		$('#wizard-below .save').click(function() {
				alert('Finished!, Starting over!');
				$('#wizard-below').find("a[href*='tab1TB']").trigger('click');
		});	
		
		// nav pills, numbering, submit button - well-nice
        $('#wizard-nice').bootstrapWizard({
                class: 'nav nav-pills',
                nextSelector: '.wizard-action .next',
                previousSelector: '.wizard-action .previous',
                onTabShow: function (tab, navigation, index) {
                        
						var $total = navigation.find('li').length;
                        var $current = index + 1;
						var $myWizard = $('#wizard-nice');
						
						$myWizard.find('.number-page').html($current + '.');
						
						// If it's the last tab then hide the last button and show the finish instead
                        if($current >= $total) {
                                $myWizard.find('.wizard-action .next').hide();
                                $myWizard.find('.wizard-action .save').show();
                                $myWizard.find('.wizard-action .save').removeClass('disabled');
                        } else {
                                $myWizard.find('.wizard-action .next').show();
                                $myWizard.find('.wizard-action .save').hide();
                        }
                }
        });
		
		// nav pills, numbering, submit button well-black
        $('#wizard-black').bootstrapWizard({
                nextSelector: '.wizard-action .next',
                previousSelector: '.wizard-action .previous',
                onTabShow: function (tab, navigation, index) {

                        var $total = navigation.find('li').length;
                        var $current = index + 1;
                        var $percent = ($current / $total) * 100;
						
						$('#wizard-black').find('.number-page').html($current + ' <span class="boo-green">of</span> ' + $total);
						
                        // If it's the last tab then hide the last button and show the finish instead
                        if($current >= $total) {
                                $('#wizard-black').find('.wizard-action .next').hide();
                                $('#wizard-black').find('.wizard-action .finish').show();
                                $('#wizard-black').find('.wizard-action .finish').removeClass('disabled');
								$('#wizard-black').find('.wizard-action .cancel').show();
                                $('#wizard-black').find('.wizard-action .cancel').removeClass('disabled');
                        } else {
                                $('#wizard-black').find('.wizard-action .next').show();
                                $('#wizard-black').find('.wizard-action .finish').hide();
								$('#wizard-black').find('.wizard-action .cancel').hide();
                        }

                }
        });
		
		// navbar, numbering, progressbar, submit button well-nice
		$('#wizard-progress').bootstrapWizard({
                nextSelector: '.wizard-action .next',
                previousSelector: '.wizard-action .previous',
                firstSelector: '.wizard-action .first',
                lastSelector: '.wizard-action .last',
                onTabShow: function (tab, navigation, index) {

                        var $total = navigation.find('li').length;
                        var $current = index + 1;
                        var $percent = ($current / $total) * 100;
						var $wizard = $('#wizard-progress');
						
                        $wizard.find('.bar').css({
                                width: $percent + '%'
                        });
						
						$wizard.find('.number-page').text($current + ' of ' + $total);
						
                        // If it's the last tab then hide the last button and show the finish instead
                        if($current >= $total) {
                                $wizard.find('.wizard-action .next').hide();
                                $wizard.find('.wizard-action .finish').show();
                                $wizard.find('.wizard-action .finish').removeClass('disabled');
								$wizard.find('.wizard-action .print').show();
                                $wizard.find('.wizard-action .print').removeClass('disabled');
								$wizard.find('.wizard-action .cancel').show();
                                $wizard.find('.wizard-action .cancel').removeClass('disabled');
                        } else {
                                $wizard.find('.wizard-action .next').show();
                                $wizard.find('.wizard-action .finish').hide();
								$wizard.find('.wizard-action .print').hide();
								$wizard.find('.wizard-action .cancel').hide();
                        }

                }
				
        });
		$('#wizard-progress .finish').click(function () {
                alert('Finished!, Starting over!');
                $('#wizard-progress').find("a[href*='tab1e']").trigger('click');
        });
		
		// custom button, progressbar indicator, submit button well-black
        $('#wizard-idicator').bootstrapWizard({
                nextSelector: '.wizard-action .next',
                previousSelector: '.wizard-action .previous',
                firstSelector: '.wizard-action .first',
                lastSelector: '.wizard-action .last',
                onTabShow: function (tab, navigation, index) {

                        var $total = navigation.find('li').length;
                        var $current = index + 1;
                        var $percent = ($current / $total) * 100;
						var $wizard = $('#wizard-idicator');
						
                        $wizard.find('.bar').css({
                                width: $percent + '%'
                        });

                        // If it's the last tab then hide the last button and show the finish instead
                        if($current >= $total) {
                                $wizard.find('.wizard-action .next').hide();
                                $wizard.find('.wizard-action .finish').show();
                                $wizard.find('.wizard-action .finish').removeClass('disabled');
								$wizard.find('.wizard-action .print').show();
                                $wizard.find('.wizard-action .print').removeClass('disabled');
                        } else {
                                $wizard.find('.wizard-action .next').show();
                                $wizard.find('.wizard-action .finish').hide();
								$wizard.find('.wizard-action .print').hide();
                        }

                }
        });
        $('#wizard-idicator .finish').click(function () {
                alert('Finished!, Starting over!');
                $('#wizard-idicator').find("a[href*='tab1f']").trigger('click');
        });
		
		$('#accNewAddressState').select2();
			
});
</script>
</body>
</html>
